<template>
  <div class="poiont">
    <section>
      <ul>
        <li v-for="item in data" :key="item.season_id">
          <router-link :to="{ name: 'present', query: { id: item.season_id } }">
            <div class="img">
              <img v-lazy="item.vertical_cover" alt="" />
            </div>
            <div class="wrod">
              <p>{{ item.title }}</p>
              <span>
                <i v-if="item.is_finish == 0">更新至</i
                ><i v-if="item.is_finish == 1">[完结]共</i>
                {{ item.last_short_title | add }}
              </span>
            </div>
          </router-link>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import { get } from "@/http/request";
export default {
  name: "poiont",
  data() {
    return {
      data: {},
    };
  },
  methods: {
    async init(data) {
      await get("https://apis.netstart.cn/mbcomic/ClassPage", {}).then(
        (res) => {
          // console.log(res);
          if (res.code == 0) {
            this.data = res.data;
          }
        }
      );
    },
    async search(data) {
      await get("https://apis.netstart.cn/mbcomic/ClassPage", data).then(
        (res) => {
          // console.log(res);
          if (res.code == 0) {
            this.data = res.data;
          }
        }
      );
    },
  },
  created() {
    this.init();
    // this.$toast({
    //     message: "加载中...",
    //     forbidClick: true,
    //     type: "loading",
    //   });
  },
  mounted() {
    // let styleid =this.$route.query.id
    // console.log(styleid);
    // styleid:'-1',areaid:'-1',isfinish:'-1',orderid:'0',isfree:'-1'
  },
  updated() {
    let obj = {};
    obj.style_id = this.$route.query.style;
    obj.area_id = this.$route.query.area;
    obj.is_finish = this.$route.query.finish;
    obj.is_free = this.$route.query.free;
    obj.order = this.$route.query.order;
    // console.log(obj);
    this.search(obj);
  },
  filters: {
    add(value) {
      if (parseInt(value)) {
        value = value + "话";
      }
      return value;
    },
  },
};
</script>
<style lang="scss" scoped>
section {
  width: 100%;
  margin-top: 5px;
  padding: 10px;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    font-size: 12px;
    color: #999;
    li {
      width: 30%;
      a {
        width: 100%;
        display: flex;
        flex-flow: column;
        .img {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .wrod {
          width: 100%;
          text-align: left;
          margin: 5px 0;
          p {
            font-size: 14px;
            color: #222;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span {
            display: block;
          }
        }
      }
    }
    li:nth-child(n + 4) {
      margin-top: 10px;
    }
  }
}
</style>